<!--
 * @Author: byron
 * @Date: 2021-09-26 09:04:56
 * @LastEditTime: 2021-09-28 17:22:03
-->
<template>
    <div class="new-songs" v-if="list.length">
        <Title>最新音乐</Title>
        <div class="list-warp">
            <div class="list" v-for="(list, index) in thunkedList" :key="index">
                <SongCard
                    v-for="(item, cardindex) in list"
                    :key="cardindex"
                    :img="item.picUrl"
                    :name="item.name"
                    :artStr="item.artStr"
                    :order="getSongOrder(index, cardindex)"
                />
            </div>
        </div>
    </div>
</template>

<script>
import SongCard from '@/components/songcard'
import { getNewSongs } from '@/api'

export default {
    components: { SongCard },
    props: {},
    data() {
        return {
            list: [],
            chunkLimit: null,
        }
    },
    watch: {},
    computed: {
        thunkedList() {
            const list = [
                this.list.slice(0, this.chunkLimit),
                this.list.slice(this.chunkLimit, this.list.length),
            ]
            list.forEach((item) => {
                item.map((element) => {
                    const artists = element.song.artists
                    const artistList = artists.map((artist) => {
                        return artist.name
                    })
                    element.artStr = artistList.join('/')
                    return element
                })
            })

            return list
        },
    },
    methods: {
        getSongOrder(a, b) {
            return a * this.chunkLimit + b + 1
        },
    },
    async created() {
        const { result } = await getNewSongs()
        this.list = result
        this.chunkLimit = result.length / 2
    },
    mounted() {},
}
</script>
<style lang="scss" scoped>
.new-songs {
    margin-bottom: 32px;
    .list-warp {
        display: flex;
        .list {
            flex: 1;
        }
    }
}
</style>
